<template>
  <div class="header-Container">
    <div class="header">
      <!-- 导航栏 -->
      <div class="nav">
        <div class="centerbox">
          <div class="right_Nav">
            <li>
              <span v-if="name">你好! {{ name }}</span>
              <router-link to="/Login" style="color: white" v-else>
                登录/注册
              </router-link>
            </li>
            <li><router-link to="/pay">我的订单</router-link></li>
            <li><a>会员</a></li>
            <li><a>甑选家</a></li>
            <li>
              <a>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    企业采购
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>企业购</el-dropdown-item>
                    <el-dropdown-item>礼品卡</el-dropdown-item>
                    <el-dropdown-item>联系我们</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </a>
            </li>
            <li>
              <a>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    客服服务
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>在线服务</el-dropdown-item>
                    <el-dropdown-item>帮助中心</el-dropdown-item>
                    <el-dropdown-item>商务合作</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </a>
            </li>
            <li>
              <i class="el-icon-mobile-phone" style="padding-left: 10px"></i>
              <a style="border-right: none">APP</a>
            </li>
          </div>
        </div>
      </div>
      <!-- 搜索 -->
      <div class="seacher">
        <div class="left" @click="toHome">
          <img src="./image/logo.png" class="seacher_logo" />
        </div>
        <div class="right">
          <input
            type="text"
            class="seacher_Input"
            placeholder="预售爆款！快来抄作业>>"
            v-model="keyword"
          />
          <div class="btn" @click="seacherKeyword">搜索</div>
          <button class="cart" @click="toShopCart">
            <img style="width: 100px" src="./image/cart.png" alt="" />
          </button>
        </div>
        <marquee
          direction="up"
          scrollamount="2"
          scrolldelay="90"
          class="cart_nav"
        >
          <ul class="cart_nav" @click="handleCheck">
            <li><a style="color: goldenrod">耳机</a></li>
            <li><a>拖鞋</a></li>
            <li><a>饼干</a></li>
            <li><a>巧克力</a></li>
            <li><a>咖啡</a></li>
            <li><a>收纳</a></li>
            <li><a>红薯</a></li>
            <li><a>咖啡</a></li>
            <li><a style="border-right: none">饼干</a></li>
          </ul>
        </marquee>
      </div>
      <!-- 菜单栏 -->
      <div
        v-show="navBarFixed"
        class="check_Container"
        :class="navBarFixed == true ? 'navBarWrap' : ''"
        style="border-bottom: 3px solid rgb(247, 241, 241)"
      >
        <div class="nav_Container" @click="goSeacher">
          <div class="nav_List">
            <li>
              <img
                style="height: 40px; margin-top: 5px"
                src="./image/logo.png"
              />
            </li>
            <li>
              <a
                class="nav_select"
                style="color: #cc9756"
                @click.prevent="toHome"
              >
                首页
              </a>
            </li>
            <li
              class="nav_Box"
              v-for="(c1, index) in CategoryList.cateList"
              :key="c1.id"
            >
              <a class="nav_select" :data-c1id="c1.id" :data-index="index">
                {{ c1.name }}
                <div class="navList_box">
                  <ul
                    class="navList_Item"
                    v-for="c2 in c1.subCateGroupList.slice(0, 8)"
                    :key="c2.id"
                  >
                    <li>
                      <h2 class="nav_title">{{ c2.name }}</h2>
                    </li>
                    <li
                      class="nav_content"
                      v-for="c3 in c2.categoryList.slice(0, 8)"
                      :key="c3.id"
                    >
                      <img class="navImg" :src="c3.bannerUrl" />
                      <a
                        :data-c3Id="c3.id"
                        :data-c1id="c1.id"
                        :data-index="index"
                      >
                        {{ c3.name }}
                      </a>
                    </li>
                  </ul>
                </div>
              </a>
            </li>
            <li>
              <img
                style="height: 40px; margin-top: 5px"
                src="./image/navlogo.jpg"
              />
            </li>
          </div>
        </div>
      </div>
      <div
        class="Container"
        style="border-bottom: 3px solid rgb(247, 241, 241)"
      >
        <div class="nav_Container" @click="goSeacher">
          <div class="nav_List">
            <li>
              <a class="nav_select" href="" @click.prevent="toHome">首页</a>
            </li>
            <li
              class="nav_Box"
              v-for="(c1, index) in CategoryList.cateList"
              :key="c1.id"
            >
              <a class="nav_select" :data-c1id="c1.id" :data-index="index">
                {{ c1.name }}
                <div class="navList_box">
                  <ul
                    class="navList_Item"
                    v-for="c2 in c1.subCateGroupList.slice(0, 8)"
                    :key="c2.id"
                  >
                    <li>
                      <h2 class="nav_title">{{ c2.name }}</h2>
                    </li>
                    <li
                      class="nav_content"
                      v-for="c3 in c2.categoryList.slice(0, 8)"
                      :key="c3.id"
                    >
                      <img class="navImg" :src="c3.bannerUrl" />
                      <a
                        :data-c3Id="c3.id"
                        :data-c1id="c1.id"
                        :data-index="index"
                      >
                        {{ c3.name }}
                      </a>
                    </li>
                  </ul>
                </div>
              </a>
            </li>
            <li><a class="nav_select" href="">众筹</a></li>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCategoryList } from '../../api/index'
import { mapState } from 'vuex'
export default {
  name: 'Header',
  props: ['scrollTop'],
  data() {
    return {
      // 菜单栏数据
      CategoryList: [],
      // 关键字
      keyword: '',
      // 滚动条-->滚动条监听事件已经提取到App.vue中,滚动条的距离通过props传递,此页面不需要再绑定滚动条的事件监听
      // navBarFixed: false,
    }
  },
  computed: {
    ...mapState('user', ['name']),
    navBarFixed() {
      if (this.scrollTop > 100) {
        return true
      } else {
        return false
      }
    },
  },
  // 初始化获取数据
  async mounted() {
    const res = await getCategoryList()
    this.CategoryList = res.data
  },
  methods: {
    // 跳转到购物车页面
    toShopCart() {
      this.$router.history.push({
        path: '/ShopCart1',
      })
    },
    // 跳转到首页
    toHome() {
      this.$router.history.push({
        path: '/',
      })
    },

    handleCheck() {
      // console.log(event)
      this.navBarFixed = false
    },
    // 菜单搜索
    goSeacher(event) {
      // console.log(event.target.dataset)
      const { c1id, c3id, index } = event.target.dataset
      if (!index) return
      this.$router.history.push({
        name: 'Item',
        query: {
          itemNumber: index,
          categoryId: c1id,
          subCategoryId: c3id,
        },
      })
    },
    // 关键字搜索
    seacherKeyword() {
      const { keyword } = this
      this.$router.history.push({
        name: 'Search',
        query: { keyword },
      })
    },
  },
}
</script>

<style lang="less" scoped>
* {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
.header-Container {
  color: rgb(219, 216, 216);
}
.nav {
  background-color: #333;
  .centerbox {
    width: 1090px;
    font-size: 12px;
    height: 36px;
    line-height: 36px;
    margin: 0px auto;
    color: rgb(219, 216, 216);
    .right_Nav {
      float: right;
      height: 100%;
      text-align: center;
      cursor: pointer;
      a:hover {
        text-decoration: none;
        color: white;
      }
      li {
        float: left;
        a {
          border-right: 1px solid gray;
          padding: 0px 13px;
          color: rgb(219, 216, 216);
        }
      }
    }
  }
}
/* 搜索 */
.seacher {
  position: relative;
  width: 1090px;
  padding: 0px 5px;
  margin: 0px auto;
  padding-top: 20px;
  display: flex;
  line-height: 50px;
  // border: 1px solid greenyellow;
}
.left {
  float: left;
  .seacher_logo {
    height: 65px;
    width: 212px;
  }
}
.right {
  position: absolute;
  right: 0px;
  display: flex;
  .seacher_Input {
    height: 36px;
    width: 442px;
    border: 1px solid #cc9756;
    border-radius: 19px;
    border-right: none;
    padding-left: 20px;
    outline: none;
    color: #999;
    font-size: 16px;
    margin-right: 100px;
  }
  .btn {
    position: absolute;
    right: 25%;
    width: 90px;
    height: 38px;
    background-color: #cc9756;
    border-top-right-radius: 19px;
    border-bottom-right-radius: 19px;
    cursor: pointer;
    color: #fff;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
  }
  .cart {
    position: relative;
    cursor: pointer;
    width: 134px;
    height: 38px;
    border: 1px solid #cc9756;
    border-radius: 19px;
    padding: 8px;
    background-color: #fff;
    color: #cc9756;
    font-size: 14px;
    margin-left: 20px;
  }
}

.cart_nav {
  display: flex;
  height: 20px;
  margin-top: 40px;
  margin-left: 95px;
  // border: 1px solid gold;
  width: 100%;
  li {
    height: 20px;
    line-height: 20px;
    // border: 1px solid rgb(43, 41, 38);
  }
}

.cart_nav li a {
  color: #999;
  padding: 0 10px;
  cursor: pointer;
  line-height: 12px;
  font-size: 12px;
  border-right: 1px solid #ccc;
}
/* 导航选择栏 */
.Container {
  // border: 1px solid red;
  height: 100%;
  position: relative;
  .nav_Container {
    overflow: hidden;
    width: 1090px;
    margin: 0px auto;
    height: 100%;
    // border: 1px solid rgb(36, 22, 19);
    .nav_List {
      margin: 0px auto;
      width: 1090px;
      line-height: 25px;
      display: flex;
      justify-content: space-between;
      // border: 1px solid yellow;
      background-color: rgb(255, 255, 255);

      a {
        font-size: 14px;
        color: #000;
      }
    }
  }
}
// 切换导航栏
.check_Container {
  display: flex;
  top: 0px;
  height: 50px;
  line-height: 50px;
  width: 100%;
  position: relative;
  background-color: rgb(255, 255, 255);
  .nav_Container {
    overflow: hidden;
    width: 100%;
    margin: 0px auto;
    height: 100%;
    // border: 1px solid rgb(196, 193, 192);
    .nav_List {
      margin: 0px auto;
      width: 1080px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      // border: 1px solid yellow;
      background-color: rgb(255, 255, 255);

      a {
        font-size: 14px;
        color: #000;
      }
    }
  }
}

.nav_select {
  font-weight: 600;
  .navList_box {
    position: absolute;
    left: 50%;
    margin-left: -650px;
    width: 1300px;
    height: 600px;
    border: 1px solid #ccc;
    display: none;
    background-color: rgb(255, 255, 255);
    z-index: 8;
    color: black;
    .navList_Item {
      padding: 5px;
      float: left;
      // border: 1px solid rgb(0, 0, 165);
      width: 150px;
      .nav_content {
        margin-top: 10px;
        font-size: 15px;
        display: flex;
        align-items: center;
        .navImg {
          height: 60px;
          line-height: 60px;
        }
      }
      .nav_title {
        padding-left: 30px;
        height: 35px;
        line-height: 35px;
        width: 120px;
        border-bottom: 1px solid #ccc;
      }
    }
  }
  // border: 1px solid skyblue;
}
.nav_select:hover {
  border-bottom: 4px solid #cc9756;
  color: #cc9756;
}
.nav_select:hover .navList_box {
  display: block;
}
.el-dropdown-link {
  cursor: pointer;
  color: #dfdfdf;
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu {
  // background-color: cornflowerblue;
  font-size: 12px !important;
  color: #ccc;
  // background-color: cadetblue !important;
}
.navBarWrap {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0;
  z-index: 999;
  line-height: 65px;
}
</style>
